<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>
<body>
    <div class="totalbox">
        <h2 class="title">PLEASE LOGIN</h2>
        <div class="infobox">    
            <input type="text" id="email"class="inputbox">       
            <label for="email" class="tip">
                <span style="transition-delay: 30ms;">E</span>
                <span style="transition-delay: 60ms;">a</span>
                <span style="transition-delay: 90ms;">m</span>
                <span style="transition-delay: 120ms;">i</span>
                <span style="transition-delay: 150ms;">l</span>
            </label>
            
        </div>
        <div class="infobox">            
            
            <input type="password" id="psw" class="inputbox">
            <label for="psw"  class="tip">
                <span style="transition-delay: 30ms;">P</span>
                <span style="transition-delay: 60ms;">s</span>
                <span style="transition-delay: 90ms;">s</span>
                <span style="transition-delay: 120ms;">w</span>
                <span style="transition-delay: 150ms;">o</span>
                <span style="transition-delay: 180ms;">r</span>
                <span style="transition-delay: 210ms;">d</span>
            </label>    
        </div>
        <div class="text">
            <div class="login">login</div>
        </div>
        <div class="text">
            <span class="footer">Don't have a account? <a href="#">Register</a></span> 
        </div>   
    </div>
</body>
</html>